<template>
    <el-dialog
      class="dialog"
      :show-close="false"
      v-model="InventoryStore.IsCover.BsEditing"
      :title="title"
      width="1000px"
      align-center
    >
       <div class="goodsInfo info">
        <p>商品信息</p>
        <p>
          <span>商品编号：{{InventoryStore.infoArr.goodsInfo.goodsid}}</span>
          <span>商品名称:{{InventoryStore.infoArr.goodsInfo.note}}</span>
        </p>
        <p>
          <span>规格：{{InventoryStore.infoArr.goodsInfo.norms}}</span>
          <span>价格（币）：{{InventoryStore.infoArr.goodsInfo.gprice}}</span>
          <span>库存：{{InventoryStore.infoArr.goodsInfo.storecount}}</span>
        </p>
      </div>
      <div class="Reporting info">
        <p>报损</p>
        <p>
          <span>
            报损数量:
            <el-input-number v-model="InventoryStore.infoArr.goodsFrmlossInfo.num" class="mx-4" />
          </span>
          <span>
            损坏原因：
            <el-input class="cause" v-model="input" placeholder="请输入原因" />
          </span>
        </p>
        <p>
          损坏描述：
          <el-input class="desc" v-model="textarea1" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入内容" />
        </p>
        <div class="pic">
          损坏图片：
          <span v-for="item in InventoryStore.infoArr.photos" :key="item">
            <img class="ReportingImg" :src="item" alt />
          </span>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="InventoryStore.changeBoolean('InfoTable')">取消</el-button>
          <el-button type="primary" @click="InventoryStore.changeBoolean('InfoTable')">提交</el-button>
        </span>
      </template>
    </el-dialog>
</template>
  
  <script setup>
  import { ref } from "vue";
import { useInventoryStore } from "../../../stores/InventoryVM";
const InventoryStore=useInventoryStore();
const input=ref('')
const textarea1=ref('')

defineProps({
  title: {
    type: String,
    default: "商品报损"
  },
});
const AllInfo = {
  goodsInfo: {
    title: "商品信息",
    goodsNumber: "L456789fgh",
    goodsName: "创意卫浴五件套，欧式高档卫生间洗漱杯子套装浴室用品牙刷牙膏嘿嘿",
    specification: "蓝色款",
    price: 250,
    total: 100
  },
  ReportingEdit: {
    title: "报损",
    number: 12,
    cause: "运输破坏",
    desc:
      "运输过程中造成物品破坏，共12件。其中2件漱口杯损坏，1件丢失，剩余均为残缺",
    img: [
      "https://t7.baidu.com/it/u=3857292935,259148533&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=3857292935,259148533&fm=193&f=GIF",
      "https://t7.baidu.com/it/u=3857292935,259148533&fm=193&f=GIF"
    ]
  },
  audit: {
    title: "审核流程",
    info: [
      {
        id: 1,
        process: "申请提交",
        people: "TC-ZY",
        result: "提交",
        remark: "请审核",
        处理时间: "2019-12-30 12:09:23"
      },
      {
        id: 2,
        process: "申请初审",
        people: "等等饿",
        result: "审核通过",
        remark: "请审核",
        处理时间: "2019-12-30 12:09:23"
      },
      {
        id: 3,
        process: "申请终审",
        people: "更是与",
        result: "审核拒绝",
        remark: "损坏图片不清晰，请重传",
        处理时间: "2019-12-30 12:09:23"
      }
    ]
  },
  applyInfo: {
    title: "申请信息",
    number: 1
  }
};
</script>
  
  <style scoped>
dialog {
  line-height: 100px;
}
.info {
  margin-bottom: 20px;
}
.info > p:nth-child(1) {
  font-weight: bold;
  color: #32325d;
  font-size: 18px;
  margin-bottom: 20px;
}
.goodsInfo {
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
.info > p:not(:nth-child(1)) {
  text-indent: 30px;
}
.info > p:nth-child(2) > span:nth-child(1) {
  margin-right: 50px;
}
.info > p:nth-child(3) {
  line-height: 60px;
}
.info > p:nth-child(3) > span {
  margin-right: 50px;
}
.ReportingImg {
  width: 125px;
  height: 125px;
  margin-right: 20px;
}
.pic {
  display: flex;
  margin-top: 10px;
  margin-left: 30px;
}
.cause {
  width: 400px;
}
.desc{
    width: 650px;
    /* height: 50px; */
}
</style>